<template>
	<!-- 	<div>{{ store.state.currentDisplayID }}</div>
	<div>{{ store.state.DisplayIDArray }}</div> -->
	<div class="sin_body">
		<div class="sin_display">
			<div class="sin_left">
				<div class="left_tip tray___forbiddenTipClick" id="left__tip"><p>左側 點擊欄</p></div>
			</div>
			<div class="sin_img" id="sin__img"><img alt="" draggable="false" id="img_url" src="../../public/calligraphyPhoto/img_6673.jpg" /></div>
			<div class="sin_right">
				<div class="right_tip tray___forbiddenTipClick" id="right__tip"><p>右側 點擊欄</p></div>
			</div>
		</div>
		<div class="sin_infos">
			<div class="sin_author">
				Provider&nbsp;:&nbsp;
				<!-- <router-link to="/ntk">李巨松</router-link> -->
				<a class="a_link link_provider" href="/#/ntk" draggable="false">李巨松</a>
			</div>
		</div>
		<div class="window_shade" id="window__shade"></div>
		<div class="sin_comment tray___display_comment" id="sin__comment"><p class="comment_default">點我</p></div>
	</div>
</template>

<script setup>
import { debounce, SetStaticCssTxt, trayElClass, tipsMount } from '../globalJS.js';
import { onMounted, reactive } from 'vue';
import { useStore } from 'vuex';
let store = useStore();

let infos = store.state.DisplayIDArray;
let currentIndex = infos.indexOf(store.state.currentDisplayID);
let lastIndex = '';

// let currentID = 'abc';
// let loghistoryImgEl = () => {
// 	console.log(historyImgEl);
// };

let historyImgEl = reactive({});

let leftTips = debounce(endsTips('到头喽'), 1000);

let rightTips = debounce(endsTips('到尾喽'), 1000);

onMounted(() => {
	let sinBodyEl = document.querySelector('.sin_body');
	let commentEl = document.getElementById('sin__comment');
	commentEl.addEventListener('click', displayComment, true);
	SetStaticCssTxt('imgUrlSize', `#img_url {max-width: 100%;max-height: 75vh;}`);
	tipClickStateChange();
	sinBodyEl.addEventListener('mousewheel', mousewheelHandle);
});

//鼠标滚轮 触发左右点击事件
function mousewheelHandle(e) {
	// console.log(e.deltaY < 0 ? 'left' : 'right');
	let leftTipEl = document.getElementById('left__tip');
	let rightTipEl = document.getElementById('right__tip');
	if (e.deltaY < 0) {
		leftTipEl.click();
	} else {
		rightTipEl.click();
	}
}

function leftTipClick() {
	tipClick('left');
}
function rightTipClick() {
	tipClick('right');
}

function endsTips(a) {
	let end_tipsStyle = `
.ends_tips {
	z-index: 20;
	font-size: 20px;
	padding: 5px 10px;
	background-color: rgba(0, 0, 0, 1);
	color: rgba(255, 255, 255, 0.8);
	position: absolute;
	left: 50vw;
	top: 30vh;
	transform: translate(-50%, -50%);
}

.ends_tips_animation {
	animation: endsTipskey 1s ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes endsTipskey {
	0% {
		translate: 0px 30px;
	}
	40% {
		translate: 0px -10px;
	}
	50%{
		translate: 0px;
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.tray___ends_tips_animation {
	display: none;
}`;

	let Name = 'ends_tips';
	let getTipsEl = document.getElementById(Name.replace('_', '__'));
	if (getTipsEl == undefined) {
		//生成 装载 ends_tips 元素
		tipsMount(Name, end_tipsStyle);
		getTipsEl = document.getElementById(Name.replace('_', '__'));
	}

	return () => {
		getTipsEl.innerText = a;
		//启用
		trayElClass(getTipsEl, `${Name}_animation`, true);
		let TipsElComputedStyle = window.getComputedStyle(getTipsEl);
		// console.log(TipsElComputedStyle.animationDelay,TipsElComputedStyle.animationDuration);
		let totalDelay = eval(parseFloat(TipsElComputedStyle.animationDuration.slice(0, -1)) + parseFloat(TipsElComputedStyle.animationDelay.slice(0, -1)));
		setTimeout(() => {
			//禁用
			trayElClass(getTipsEl, `${Name}_animation`);
		}, totalDelay * 1000);
	};
}

function tipClick(operate) {
	// 创建 img 元素
	let newImgEl = document.createElement('img');
	newImgEl.alt = '';
	newImgEl.draggable = false;
	newImgEl.id = 'img_url';

	if (operate == 'left') {
		lastIndex = currentIndex;
		//左 偏移一个 -1
		currentIndex += -1;

		//预加载!!!
		//记录本次 相关信息
		let imgPositionEl = document.getElementById('sin__img');

		//如果是未被记录的元素
		if (historyImgEl[lastIndex] == undefined) {
			historyImgEl[lastIndex] = imgPositionEl.innerHTML;
		}

		//如果 当前指针 所对应的信息 已被记录 则 复用信息
		if (historyImgEl[currentIndex] != undefined) {
			//元素是已经被记录的
			//装载img
			imgPositionEl.innerHTML = '';
			imgPositionEl.innerHTML = historyImgEl[currentIndex];
		} else if (historyImgEl[currentIndex] == undefined) {
			//import 图片信息
			// console.log(infos[currentIndex].slice(1))
			import(`/public/calligraphyPhoto/img_${infos[currentIndex].slice(1)}.jpg`).then(e => {
				try {
					if (e.default == undefined) {
						throw `/public/calligraphyPhoto/img_${infos[currentIndex].slice(1)}.jpg`;
					} else {
						newImgEl.src = e.default;

						//装载img
						imgPositionEl.innerHTML = '';
						imgPositionEl.appendChild(newImgEl);
					}
				} catch (e) {
					//TODO handle the exception
					alert(`圖片信息 ${e} 未獲取到`);
				}
			});
		}

		//重设置 tip 样式和 卸载或添加 tipClick 点击事件

		tipClickStateChange(currentIndex);
	} else if (operate == 'right') {
		lastIndex = currentIndex;
		//右 偏移一个 +1
		currentIndex += 1;

		//预加载!!!
		//记录本次 相关信息
		let imgPositionEl = document.getElementById('sin__img');

		//如果是未被记录的元素
		if (historyImgEl[lastIndex] == undefined) {
			historyImgEl[lastIndex] = imgPositionEl.innerHTML;
		}

		//如果 当前指针 所对应的信息 已被记录 则 复用信息
		if (historyImgEl[currentIndex] != undefined) {
			//元素是已经被记录的
			//装载img
			imgPositionEl.innerHTML = '';
			imgPositionEl.innerHTML = historyImgEl[currentIndex];
		} else if (historyImgEl[currentIndex] == undefined) {
			//import 图片信息
			// console.log(infos[currentIndex].slice(1))
			import(`/public/calligraphyPhoto/img_${infos[currentIndex].slice(1)}.jpg`).then(e => {
				try {
					if (e.default == undefined) {
						throw `/public/calligraphyPhoto/img_${infos[currentIndex].slice(1)}.jpg`;
					} else {
						newImgEl.src = e.default;

						//装载img
						imgPositionEl.innerHTML = '';
						imgPositionEl.appendChild(newImgEl);
					}
				} catch (e) {
					//TODO handle the exception
					alert(`圖片信息 ${e} 未獲取到`);
				}
			});
		}

		//重设置 tip 样式和 卸载或添加 tipClick 点击事件

		tipClickStateChange(currentIndex);
	} else {
		console.log(`Sorry, we gotten an unexpected value at arguments[1] operate: "${operate}"\nPs:we need "left" or "right"`);
	}
}

function tipClickStateChange(newVal) {
	let leftTipEl = document.getElementById('left__tip');
	let rightTipEl = document.getElementById('right__tip');

	if (newVal == undefined) {
		// 初始化状态
		if (infos.length == 1) {
			leftTipEl.style.display = 'none';
			rightTipEl.style.display = 'none';
		} else {
			//left Checkc
			if (infos[currentIndex - 1] == undefined) {
				//限制 文字颜色
				trayElClass(leftTipEl, 'forbiddenTipClick', true);
				setTimeout(() => {
					//添加 到头小提示
					leftTipEl.addEventListener('click', leftTips);
				}, 0);
			} else if (infos[currentIndex - 1] != undefined) {
				//取消限制 文字颜色
				trayElClass(leftTipEl, 'forbiddenTipClick');

				//添加事件
				leftTipEl.addEventListener('click', leftTipClick, true);
				//移除 到头小提示
				leftTipEl.removeEventListener('click', leftTips);
			}

			//right Check
			if (infos[currentIndex + 1] == undefined) {
				//限制 文字颜色
				trayElClass(rightTipEl, 'forbiddenTipClick', true);
				setTimeout(() => {
					//添加 到头小提示
					rightTipEl.addEventListener('click', rightTips);
				}, 0);
			} else if (infos[currentIndex + 1] != undefined) {
				//取消限制 文字颜色
				trayElClass(rightTipEl, 'forbiddenTipClick');

				//添加事件
				rightTipEl.addEventListener('click', rightTipClick, true);
				//移除 到尾小提示
				rightTipEl.removeEventListener('click', rightTips);
			}
		}
	} else {
		currentIndex = newVal;
		if (infos[currentIndex] != undefined) {
			//left Check
			if (infos[currentIndex - 1] == undefined) {
				//限制 文字颜色
				trayElClass(leftTipEl, 'forbiddenTipClick', true);

				//取消事件
				leftTipEl.removeEventListener('click', leftTipClick, true);
				setTimeout(() => {
					//添加 到头小提示
					leftTipEl.addEventListener('click', leftTips);
				}, 0);
			} else if (infos[currentIndex - 1] != undefined) {
				//取消限制 文字颜色
				trayElClass(leftTipEl, 'forbiddenTipClick');

				//添加事件
				leftTipEl.addEventListener('click', leftTipClick, true);
				//移除 到头小提示
				leftTipEl.removeEventListener('click', leftTips);
			}

			//right Check
			if (infos[currentIndex + 1] == undefined) {
				//限制 文字颜色
				trayElClass(rightTipEl, 'forbiddenTipClick', true);

				//取消事件
				rightTipEl.removeEventListener('click', rightTipClick, true);

				setTimeout(() => {
					//添加 到尾小提示
					rightTipEl.addEventListener('click', rightTips);
				}, 0);
			} else if (infos[currentIndex + 1] != undefined) {
				//取消限制 文字颜色
				trayElClass(rightTipEl, 'forbiddenTipClick');

				//添加事件
				rightTipEl.addEventListener('click', rightTipClick, true);
				//移除 到尾小提示
				rightTipEl.removeEventListener('click', rightTips);
			}
		} else {
			console.log('we might got a wrong value');
		}
	}
	// console.log(infos, lastIndex, currentIndex);
}

function displayComment() {
	let sinBodyEl = document.querySelector('.sin_body');

	let commentEl = document.getElementById('sin__comment');

	let shadeEl = document.getElementById('window__shade');

	//展示 遮罩层
	shadeEl.style = 'display: block;';

	//添加遮罩层 点击事件
	shadeEl.addEventListener('click', shrinkComment, false);
	//移除 sin_coment 点击事件
	commentEl.removeEventListener('click', displayComment, true);
	//移除 sinBodyEl mousewheel 事件
	sinBodyEl.removeEventListener('mousewheel', mousewheelHandle);
	// setTimeout(() => {
	// 	console.log((commentEl.style.animationDirection = 'reverse'));
	// }, 3000);

	//添加动画
	commentEl.classList.add('active_comment');

	let computedStyleEl = window.getComputedStyle(commentEl);
	// console.log(computedStyleEl);
	let totalDelay = eval(parseFloat(computedStyleEl.animationDuration.slice(0, -1)) + parseFloat(computedStyleEl.animationDelay.slice(0, -1)));
	// console.log(totalDelay);

	setTimeout(() => {
		//隐式 class sin_comment 为 tray___sin_comment
		trayElClass(commentEl, 'sin_comment');
	}, parseFloat(computedStyleEl.animationDelay.slice(0, -1)) * 1000);

	setTimeout(() => {
		//显式 class tray___display_comment 为 display_comment
		trayElClass(commentEl, 'display_comment', true);
		//移除动画
		commentEl.classList.remove('active_comment');
	}, totalDelay * 1000);
}

function shrinkComment() {
	let sinBodyEl = document.querySelector('.sin_body');

	let commentEl = document.getElementById('sin__comment');

	let shadeEl = document.getElementById('window__shade');

	//隐藏 遮罩层
	shadeEl.style = 'display: none;';

	//移除遮罩层 点击事件
	shadeEl.removeEventListener('click', shrinkComment, false);
	// 恢复 sin_coment 点击事件
	commentEl.addEventListener('click', displayComment, true);
	// 恢复 sinBodyEl mousewheel 事件
	sinBodyEl.addEventListener('mousewheel', mousewheelHandle);

	//添加动画
	commentEl.classList.add('endless_comment');

	let computedStyleEl = window.getComputedStyle(commentEl);
	// console.log(computedStyleEl);
	let totalDelay = eval(parseFloat(computedStyleEl.animationDuration.slice(0, -1)) + parseFloat(computedStyleEl.animationDelay.slice(0, -1)));
	// console.log(totalDelay);

	setTimeout(() => {
		//隐式 class display_comment 为 tray___display_comment
		trayElClass(commentEl, 'display_comment');
	}, parseFloat(computedStyleEl.animationDelay.slice(0, -1)) * 1000);

	setTimeout(() => {
		//显示式 class tray___sin_comment 为 sin_comment
		trayElClass(commentEl, 'sin_comment', true);
		//移除动画
		commentEl.classList.remove('endless_comment');
	}, totalDelay * 1000);
}
</script>

<style scoped lang="scss">
.sin_body {
	width: 80vw;
	height: 100vh;
	// position: relative;

	z-index: 1;

	margin: 0 auto;
}
.sin_display {
	width: 100%;
	height: 80%;

	z-index: 3;

	position: relative;
}
.sin_left {
	width: 20%;
	height: 100%;
	position: absolute;

	z-index: 5;

	cursor: pointer;

	left: 0px;
	top: 0px;
	overflow: hidden;
}

.left_tip {
	width: 100%;
	height: 100%;
	transform: translate(-100%, 0);

	z-index: 7;

	display: flex;
	align-items: center;
	justify-content: center;
}

.sin_img {
	position: absolute;

	z-index: 5;

	left: 50%;
	top: 50%;

	transform: translate(-50%, -50%);
}

.sin_right {
	width: 20%;
	height: 100%;
	position: absolute;

	z-index: 5;

	cursor: pointer;

	right: 0px;
	top: 0px;
	overflow: hidden;
}
.right_tip {
	width: 100%;
	height: 100%;
	transform: translate(100%, 0);

	z-index: 7;

	display: flex;
	align-items: center;
	justify-content: center;
}
.sin_infos {
	width: 100%;
	height: 10%;

	z-index: 3;

	display: flex;
	justify-content: center;
	align-items: center;
}

.sin_comment {
	width: 100%;
	height: 10%;

	z-index: 3;

	cursor: pointer;

	display: flex;
	justify-content: center;
	align-items: center;
}
.display_comment {
	position: absolute;
	width: 80vw;
	height: 80%;

	top: 20%;

	z-index: 3;
}

.comment_default {
	z-index: 5;
}

.window_shade {
	display: none;
	width: 100vw;
	height: 100vh;

	z-index: 3;

	// background-color: rgba(0, 200, 255, 1);

	position: fixed;
	top: 0;
	left: 0;
}

.active_comment {
	position: absolute;
	width: 80vw;

	z-index: 3;

	animation: avticeComent 0.2s ease-in-out 0.2s;
	animation-fill-mode: forwards;
}

.endless_comment {
	position: absolute;
	width: 80vw;

	z-index: 3;

	animation: endlessComent 0.2s ease-in-out 0.2s;
	animation-fill-mode: forwards;
}

.forbiddenTipClick {
	color: gray;
}

///// animation
.sin_left:hover > .left_tip {
	transform: translate(0, 0);
	transition: transform 0.2s ease-in-out 0.05s;
}
.sin_right:hover > .right_tip {
	transform: translate(0, 0);
	transition: transform 0.2s ease-in-out 0.05s;
}

@keyframes avticeComent {
	0% {
		height: 10%;
		top: 90%;
	}
	100% {
		height: 80%;
		top: 20%;
	}
}
@keyframes endlessComent {
	0% {
		height: 80%;
		top: 20%;
	}
	100% {
		height: 10%;
		top: 90%;
	}
}
</style>
